<template>
  <div>
    <div class="demo-box">
      <div class="today-head">
        <div class="title">
          <!-- <h3>历史上的今天</h3> -->
          <span class="mui-icon mui-icon-search" v-show="showFlag" @click="goSearch"></span>
          <span class="mui-icon mui-icon-bars" v-show="searchFlag" @click="goList"></span>
        </div>
      </div>
      <div class="demo-items-box" v-if="showFlag">
        <ul>
          <li class="today-cell" v-for="item in list" :key="item.title">
            <div class="today-cell-box">
              <h4>{{ item.title }}</h4>
              <p>{{ item.year}}年{{item.month}}月{{item.day}}日</p>
              <img v-if="item.img" v-lazy="item.img" :alt="item.title">
            </div>
          </li>
        </ul>
      </div>
      <!-- <div class="search-box" v-if="searchFlag">
        <div class="mui-input-row mui-input-search">
          <div class="search-input-box">
            <input
            type="search"
            class="mui-input-clear"
            :placeholder= "this.placeholder"
            @keyup="search($event)"
            ref="input"
          >
          <span class="mui-icon mui-icon-search"></span>
          <span class="mui-icon mui-icon-clear mui-hidden"></span>
          </div>
        </div>
        <div class="history">
          <div class="cell-title">搜索历史</div>
          <div class="history-search"> 
            <span v-for="item in historyList" :key="item.id">{{ item.value }}</span>
          </div>
        </div>
      </div>-->
      <!-- 父组件向子组件传值--2 在子组件中用v-bind绑定,this.取出父组件data中的数据，赋值给传给子组件的变量-->
      <!-- 子组件向父组件传值--2：子组件v-on事件绑定，将父组件的方法传给子组件-->
      <!-- 父子组件之间传值，传的是变量（存储函数或者属性值） -->
      <!-- 绑定在子组件上 -->
      <searchBox
        v-if="searchFlag"
        :parent_placeholder="this.placeholder"
        @p_keyup="p_search"
        :p_historyList="this.historyList"
        @p_delete="p_delete"
        @p_againSearch="historySearch"
      ></searchBox>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import searchBox from "../../subcomponents/searchBox.vue";
export default {
  data() {
    return {
      title: "历史上的今天",
      list: [],
      showFlag: true,
      searchFlag: false,
      searchObj: {},
      historyList: [],
      // 父组件向子组件传值--1
      placeholder: "请输入月份和日期，如0521，enter搜索"
    };
  },
  created() {
    this.getTodayNews(this.getMyDate());
    this.showTitle(this.title)
  },
  mounted() {},
  methods: {
    getTodayNews(dateObj) {
      var url = "https://route.showapi.com/119-42"
      var data = {
          showapi_appid: "88927",
          showapi_sign: "7132f458c7df46c88cdd908f5346fb25",
          showapi_timestamp: dateObj.timeStamp,
          date: dateObj.searchDate
        }
      this.$http.post(url, this.$qs.stringify(data))
        .then((res) => {
            // console.log(res);
            if (res.data.showapi_res_body.ret_code == 0) {
              this.list = res.data.showapi_res_body.list;
              // console.log(this.list)
            } else {
              Toast("获取图片失败");
            }
          })
        .catch(error => {
          Toast("Sorry, please try again");
        });
    },
    getMyDate() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var second =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      var timeStamp = year + month + day + hour + minute + second;
      var searchDate = month + day;
      var dateObj = { timeStamp: timeStamp, searchDate: searchDate };
      return dateObj;
    },
    goSearch() {
      this.showFlag = false;
      this.searchFlag = true;
      this.getHistoryList();
    },
    goList() {
      this.showFlag = true;
      this.searchFlag = false;
    },
    // 子组件向父组件传值--1：父组件定义方法
    // value值在子组件获取然后传给父组件--4
    p_search(e, value) {
      var regex = /^[0-1][0-9][0-3][0-9]$/;
      // enter 是13，或者是点击搜索历史传入了日期值
      // 一起判断会重复存储已经搜索过的值
      if (e.keyCode == 13) {
        // 键盘录入的date值获取在子组件进行，然后传给父组件
        // var value = this.$refs.input.value.trim();
        if (!regex.test(value)) return Toast("请按格式输入日期");
        this.searchObj = this.getMyDate();
        this.searchObj.searchDate = value;
        var obj = {
          "id": this.searchObj.timeStamp,
          "value" : value
        };
        this.historyList.push(obj);
        localStorage.setItem(
          "historyList-key",
          JSON.stringify(this.historyList)
        );
        this.getTodayNews(this.searchObj);
        this.goList();
      }
      // if(value){

      // }
    },
    historySearch(date){
      // console.log(date);
      this.searchObj = this.getMyDate();
      this.searchObj.searchDate = date;
      this.getTodayNews(this.searchObj);
      this.goList()
    },
    getHistoryList() {
      // 进一步可控制显示的数量：数组长度
      this.historyList =
        JSON.parse(localStorage.getItem("historyList-key")) || [];
    },
    p_delete(){
      // 清空localStorage，并history数据清空，否则搜索记录只能在下一次刷新时才会清除
      // 清空指定的localStorage用 removeItem, 用clear 不管是否带参数，都会清空所有内容
      localStorage.removeItem("historyList-key");
      this.historyList = []
    },
    showTitle(title){
      this.$emit('getTitle', title)
    }
  },
  components: {
    searchBox: searchBox
  }
};
</script>

<style lang="scss" scoped>
$baseColor: #26a2ff;
.demo-box {
  margin-bottom: 20px;
  overflow-y: auto;
  .today-head {
    // 固定定位会跳动，应该是由于mui的底部tabbar是加动画切换进来有关
    // position: fixed;
    // top: 40px;
    // left: 0;
    // right: 0;
    .title {
      span {
        position: fixed;
        right: 15px;
        top: 6px;
        z-index: 999;
        color: #fff;
      }
    }
    .mui-search {
      padding: 0 10px;
      input {
        background: #fff;
      }
    }
  }

  .demo-items-box {
    margin-top: 10px;
    ul {
      .today-cell {
        list-style: none;
        margin: 10px 5px;
        border-radius: 10px;
        box-shadow: 3px 3px 10px #ccc;
        display: block;
        padding: 20px 0;
        margin-bottom: 20px;
        background: #f3f3f3;
        font-size: 16px;

        .today-cell-box {
          img {
            width: 100%;
            vertical-align: middle;
            text-align: center;
          }
          h4 {
            padding-left: 10px;
            line-height: 1.3;
          }
          p {
            padding-left: 10px;
            color: $baseColor;
          }
        }
      }
    }
  }
}
</style>